<template>
    <div class="page-container">
        <Example title="巧用 not 选择器">
            <ul>
                <li>
                    <span>单元格</span>
                    <span>内容</span>
                </li>
                <li>
                    <span>单元格</span>
                    <span>内容</span>
                </li>
                <li>
                    <span>单元格</span>
                    <span>内容</span>
                </li>
                <li>
                    <span>单元格</span>
                    <span>内容</span>
                </li>
            </ul>
        </Example>

        <Example title="图片自适应">
            <div style="width: 30%">
                <div class="box">
                    <div class="img-container">
                        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
                    </div>
                </div>

                <div class="box">
                    <div class="img-container">
                        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
                    </div>
                </div>

                <div class="box-vw">
                    <div class="img-container">
                        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
                    </div>
                </div>
            </div>
        </Example>

        <Example title="画小箭头">
            <div class="box">
                <div class="box-inner">
                    <div class="arrow bottom"></div>
                    <div class="arrow top"></div>
                    <div class="arrow right"></div>
                    <div class="arrow left"></div>
                </div>
            </div>
        </Example>

        <Example title="画三角形">
            <div class="box">
                <div class="box-inner">
                    <div class="triangle bottom"></div>
                    <div class="triangle right"></div>
                    <div class="triangle top"></div>
                    <div class="triangle left"></div>
                </div>
            </div>
        </Example>

        <Example title="哀悼模式">
            <div class="grayscale">
                <p style="color: blue;">纪念辛亥革命110周年大会9日上午在北京人民大会堂隆重举行。习近平出席大会并发表重要讲话。 特别声明:以上内容(如有图片或视..</p>
                <div class="box">
                    <div class="img-container">
                        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
                    </div>
                </div>
            </div>
        </Example>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [],
        };
    },
    methods: {
        initData() {
            const list = [];
            for (let index = 0; index < 1000; index++) {
                list.push({ content: "111" });
            }
            this.data = list;
        },
    },
    created() {
        this.initData();
    },
};
</script>

<style lang="less" scoped>
li:not(:last-child) {
    border-bottom: 1px solid #ebedf0;
}

.box,
.box-vw {
    background-color: #f5f6f9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.box:nth-of-type(2) {
    width: 260px;
}
/* vw方案 */
.box-vw .img-container {
    width: 100vw;
    height: 66.620879vw;
    padding-bottom: inherit;
}
/* padding方案 */
.img-container {
    width: 100%;
    height: 0;
    /* 图片的高宽比 */
    padding-bottom: 66.620879%;
}

img {
    width: 100%;
}

.arrow {
    display: inline-block;
    margin-right: 10px;
    /* 基础样式 */
    width: 0;
    height: 0;
    /* 基础样式 */
    border: 16px solid;
    border-color: transparent #cddc39 transparent transparent;
    position: relative;
}

.arrow::after {
    content: "";
    position: absolute;
    /* 通过位移覆盖背景 */
    right: -20px;
    top: -16px;
    border: 16px solid;
    border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
    transform: rotate(270deg);
}
/*上*/
.arrow.top {
    transform: rotate(90deg);
}
/*左*/
.arrow.left {
    transform: rotate(180deg);
}
/*右*/
.arrow.right {
    transform: rotate(0deg);
}

.triangle {
    display: inline-block;
    margin-right: 10px;
    /* 基础样式 */
    border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
    border-top-color: #0097a7;
}
/*上*/
.triangle.top {
    border-bottom-color: #b2ebf2;
}
/*左*/
.triangle.left {
    border-right-color: #00bcd4;
}
/*右*/
.triangle.right {
    border-left-color: #009688;
}

.grayscale {
    filter: grayscale(1);
}
</style>
